<template>
  <div class="table-view">
    <p class="table-title" v-if="tableTitle">{{tableTitle}}</p>
    <table class="table table-bordered">
      <tr v-for="row in tableRows" track-by="$index">
        <td v-for="col in row" track-by="$index" v-html="col" :id="$parent.$index">
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default{
//      props: ['tableTitle', 'tableRows'],
    data () {
      var data = {}
      data.tableTitle = ''
      data.tableRows = ''
      return data
    },
    events: {
      'changeOptionTable': function (title, content) {
        this.tableRows = content
        this.tableTitle = title
      }
    },
    ready: function () {
    }
  }
</script>

<style lang="scss" scoped>
  .table-view{
    position: relative;
    box-sizing: border-box;
    font-size: 1rem;
    /*padding: 0 1.5rem;*/

    p.table-title{
      padding-left: .2rem;
      width: 100%;
      text-align: left;
      font-size: .35rem;
      height:.5rem;
      line-height: .5rem;
      margin-top: .2rem;
    }

    table{
      width: 100%;

      tr{
        td{
          text-align: center;
          font-size: .25rem;
          vertical-align: middle !important;
          padding: .1rem;
          height: .23rem;
          vertical-align: middle;
          border-bottom: 1px solid #d8d8d8 !important;
          text-align: center;
        }
      }
      tr:first-child{
        background-color: #ccc;
      }
    }
    table {
      margin-bottom: .1rem;
      width: 100%;
      font-size: .20rem;
      border-collapse: collapse;
      border-spacing: 0;
    }
  }
</style>
